<template>
  <div>
    <headers heatle="密读小课"></headers>
    <div class="book-center">
      <div class="book-cernte-content" v-for="i in bookLists" @click="particulars()">
        <img :src="URL + i.bookimg " alt="">
        <div>
          <h6>{{i.bookname}}</h6>
          <p>{{i.bookrecommend}}</p>
          <span>{{i.bookprice}} / {{i.contentsummary}}</span>
        </div>
      </div>
    </div>
  </div>


</template>

<script>
  import headers from '@/components/headers'
    export default {
        name: "xiaokebook",
      data(){
        return{
          bookLists:[],
        }
      },
      components:{
          headers
      },
      mounted(){
        let  date = new Date().getTime() //获取当前时间戳
        let obj ={page :1,rows:'10',timestamp:date,token :0,type:1}
        let sign =  this.md5(this.objKeySort(obj)+'44543e5367854cfcbb3a867f32fa64a2')//加密
        let url = 'https://testapi.readerday.com/v3/product/book/list/0/' + sign +'/'+ date +'/1/2/1/10'
        this.$axios.get(url)
          .then((res)=>{
            this.bookLists=[]
            this.bookLists=res.data.data.book_list

            console.log(this.bookLists)
          })
      },
      methods:{

      }
    }
</script>

<style scoped>
  .book-center{
    /*height:1.5rem;*/
    overflow: hidden;
  }

  .book-center >p{
    text-align: left;
    line-height: .34rem;
  }
  .book-cernte-content {
    height: .9rem;
    padding: 0 0.08rem;
  }
  .book-cernte-content img{
    float: left;
    height: 75px;
    width: 75px;
    margin-right: 10px;
  }
  .book-cernte-content div{
    float: left;
    text-align: left;
    width: calc(100% - 95px);
  }
  .book-cernte-content div h6{
    font-size: .14rem;
    height: .22rem;
    font-weight: bold;
  }
  .book-cernte-content div p{
    height: .34rem;
    font-size: .12rem;
    width: 100%;
  }
  .book-cernte-content div span{
    height: .15rem;
    line-height: .12rem;
    font-size: .12rem;
  }
</style>
